<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

    <style type="text/css">
        p {
            text-align: right;
        }

        #totalPrice {
            color: red;
            font-size: 30px;
        }

        h2 {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>

<body>
<h1>我的京东_生成订单</h1>
<hr/>

<form action="${pageContext.request.contextPath }/order/addOrder" method="post">

    收货地址: <select id="sheng" name="sheng" onchange="getShis(this)" required>
    <option value="">--请选择--</option>
</select>省
    <select id="shi" name="shi" onchange="getXians(this)" required>
        <option value="">--请选择--</option>
    </select>市
    <select id="xian" name="xian" required>
        <option value="">--请选择--</option>
    </select>县<br/>

    <textarea rows="8" cols="30" name="receiveinfo" required></textarea><br/>
    支付方式:<input type="radio" checked/> 在线支付<br/>
    <input type="submit" value="生成订单"/>

</form>


    <table id="t1" border="1" cellspacing="0" cellpadding="10" width="100%">
        <tr>
            <th>缩略图</th>
            <th>商品名称</th>
            <th>商品种类</th>
            <th>商品单价</th>
            <th>购买数量</th>
            <th>库存数量</th>
            <th>总价</th>

        </tr>
        <c:forEach items="${map }" var="entry">

            <tr>
                <td><img src="${applicationScope.pic_url}${entry.key.imgurls}"></td>
                <td><c:out value="${entry.key.name}"></c:out></td>
                <td><c:out value="${entry.key.type}"></c:out></td>
                <td><c:out value="${entry.key.price}"></c:out></td>
                <td>  ${entry.value} </td>
                <td>
                    <c:if test="${entry.key.pnum >= entry.value}">
                        <span id="huo">有货</span>
                    </c:if>
                    <c:if test="${entry.key.pnum < entry.value}">
                        <span id="huo">缺货</span>
                    </c:if>
                </td>
                <td class="preTotal">
                    <fmt:formatNumber value="${entry.key.price * entry.value}" pattern="#.##"
                                      minFractionDigits="2"> </fmt:formatNumber>
                </td>


            </tr>

        </c:forEach>

    </table>

    <p><span id="totalPrice"></span></p>



</body>

<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $.get("${pageContext.request.contextPath}/ProvinceServlet",function (shengs) {

        for(var i = 0;i<shengs.length;i++){
            var sheng = shengs[i];
            $("#sheng").append('<option value="'+sheng.provinceid+":"+sheng.province+'">'+sheng.province+'</option>');
        }
    },"json")

    function getShis(obj) {
        //根据省的id获取所有的是
        var id = $(obj).val().split(":")[0];
        if(id){
            $("#shi option:gt(0)").remove();
            $("#xian option:gt(0)").remove();
            $.get("${pageContext.request.contextPath}/CityServlet",{provinceid:id},function (shis) {
                for(var i = 0;i<shis.length;i++){
                    var shi = shis[i];
                    $("#shi").append('<option value="'+shi.cityid+":"+shi.city+'">'+shi.city+'</option>');
                }
            },"json")
        }
    }

    function getXians(obj) {
        //根据省的id获取所有的是
        var id = $(obj).val().split(":")[0];
        if(id){
            $("#xian option:gt(0)").remove();
            $.get("${pageContext.request.contextPath}/AreaServlet",{cityid:id},function (xians) {
                for(var i = 0;i<xians.length;i++){
                    var xian = xians[i];
                    $("#xian").append('<option value="'+xian.area+'">'+xian.area+'</option>');
                }
            },"json")
        }
    }

    total();

    //计算所有商品总价
    function total(){
        //获取所有显示 单个商品的总价 ,
        var tds = document.getElementsByClassName("preTotal");

        //累加
        var sum = 0;
        for(var i = 0;i<tds.length;i++){
            //alert( tds[i].innerHTML );
            var price = parseFloat(tds[i].innerHTML);
            sum += price;
        }

        //alert(sum);
        var span = document.getElementById("totalPrice");
        span.innerHTML = "¥"+sum;
    }
</script>
</html>
